<template>
	<view class="container">
		<view class="header">
			<view class="header-return" @click="returnclick()"></view>
			<view class="header-title">结果页</view>
		</view>
		<view class="body">
			<view class="body-result">
				
			</view>
			<view class="body-recommend">
				
			</view>
			<view class="body-shared">
				
			</view>
		</view>
		<view class="body-button" @click="returnclick()">
			返回
		</view>
	</view>
</template>

<script>
	import { getQuestionbank } from "@/api/index";
	export default {
		data() {
			return {
				
			}
		},
		created() {
		   this.Initialize()
		},
		methods: {
			Initialize(){
				
			},
			returnclick(){
				this.$store.state.user.refresh = !this.$store.state.user.refresh
				this.$router.push('/pages/mine/index')
			},
		},
	}
</script>

<style>
	.container {
		font-size: 4vw;
		width: 100vw;
		height: 100vh;
		display: grid;
		justify-items: center;
		align-items: center;
		/* grid-template-columns: 1fr; */
		grid-template-rows: 12.5vw auto 12vw;
		background: #ffffff;
	}
	.header{
		width: 100%;
		height: 12.5vw;
		background: #ffffff;
		border: 1px solid #F6F7F8;
		display: grid;
		justify-items: center;
		align-items: center;
		/* grid-template-columns: 1fr; */
		/* grid-template-rows: 1fr 1fr; */
	}
	.header-title{
		font-size: 5vw;
	}
	.header-return{
		position: absolute;
		width: 5vw;
		height: 5vw;
		left: 5vw;
		top: 3.5vw;
		background: url(../../static/index/return.svg);
		background-size: 100% 100%;
		cursor: pointer;
	}
	.body{
		margin: 0 0 0 0;
		width: 100%;
		height: 100%;
		display: grid;
		justify-items: center;
		align-items: center;
		grid-row-gap: 5vw;
		/* grid-template-columns: 1fr; */
		grid-template-rows: 54vw auto auto;
		overflow: auto;
	}
	.body-result{
		width: 100%;
		height: 100%;
		background: url(../../static/aqc/result.svg);
		background-size: 100% 100%;
	}
	.body-recommend{
		width: 100%;
		height: 100%;
		display: grid;
		justify-items: center;
		align-items: center;
		/* grid-template-columns: 1fr; */
		grid-template-rows: auto auto auto;
		background: #ffffff;
	}
	.body-recommend-title{
		padding: 0 0 0 2vw;
		width: 100%;
		display: grid;
		justify-items: start;
		align-items: center;
		font-size: 5vw;
	}
	.body-recommend-piece{
		margin: 0 0 4vw 0;
		width: 100%;
		height: 30vw;
		background: #ffffff;
		border-radius: 2vw;
		display: grid;
		justify-items: center;
		align-items: center;
		/* grid-template-columns: 10% 80% 10%; */
		grid-template-rows: 30% 40% 20%;
	}
	.body-recommend-piece-header{
		width: 95%;
		height: 100%;
		display: grid;
		justify-items: start;
		align-items: end;
		grid-template-columns: 10% 70% 20%; 
		/* grid-template-rows: 20vh 1fr; */
		font-size: 3.6vw;
	}
	.body-recommend-piece-header-icon{
		width: 5vw;
		height: 5vw;
		background: url(../../static/hot/studio.png);
		background-size: 100% 100%;
	}
	.body-recommend-piece-header-text{
		width: 100%;
		white-space: nowrap;
		text-overflow:ellipsis;
		overflow:hidden;
		color: #515257;
	}
	.body-recommend-piece-header-time{
		margin: 0 0 0 auto;
		color: #B3B5B9;
	}
	.body-recommend-piece-student{
		width: 95%;
		height: 100%;
		display: grid;
		justify-items: start;
		align-items: center;
		grid-template-columns: 10% 70% 20%; 
		/* grid-template-rows: 20vh 1fr; */
	}
	.body-recommend-piece-student-icon{
		margin: -1vw 0 0 0;
		width: 5vw;
		height: 5vw;
		background: url(../../static/hot/student.png);
		background-size: 100% 100%;
	}
	.body-recommend-piece-student-text{
		width: 100%;
		white-space: nowrap;
		text-overflow:ellipsis;
		overflow:hidden;
	}
	.body-recommend-piece-teacher{
		width: 95%;
		height: 100%;
		display: grid;
		justify-items: start;
		align-items: center;
		grid-template-columns: 10% 70% 20%;
		/* grid-template-rows: 20vh 1fr; */
		font-size: 3vw;
	}
	.body-recommend-piece-teacher-icon{
		margin: -1vw 0 0 0;
		width: 5vw;
		height: 5vw;
		background: url(../../static/hot/teacher.png);
		background-size: 100% 100%;
	}
	.body-recommend-piece-teacher-text{
		width: 100%;
		white-space: nowrap;
		text-overflow:ellipsis;
		overflow:hidden;
		color: #686B73;
	}
	.body-recommend-piece-teacher-details{
		margin: 0 0 0 auto;
		width: 10vw;
		height: 5vw;
		background: url(../../static/hot/details.svg);
		background-size: 100% 100%;
		cursor: pointer;
	}
	
	.body-shared{
		margin: 0 0 0 0;
		width: 100%;
		height: 100%;
		display: grid;
		justify-items: center;
		align-items: center;
		/* grid-template-columns: 1fr; */
		grid-template-rows: auto auto;
		background: #ffffff;
	}
	
	.body-shared-title{
		padding: 0 0 0 2vw;
		width: 100%;
		display: grid;
		justify-items: start;
		align-items: center;
		font-size: 5vw;
	}
	.body-shared-video{
		width: 100vw;
		height: auto;
		display: grid;
		justify-items: center;
		align-items: center;
		grid-template-columns: 50vw 50vw;
		grid-template-rows: 43vw 43vw;
	}
	/* width: 43.2vw;
	height: 24.3vw; */
	.body-lecture-piece{
		padding: 3vw;
		width: 100%;
		height: 100%;
		display: grid;
		justify-items: center;
		align-items: center;
		/* grid-template-columns: 1fr 1fr; */
		grid-template-rows: 4fr 1.2fr 0.8fr;
		border-radius: 2vw;
		background-color: #ffffff;
		box-shadow: 1px 1px rgba(0, 0, 0, 0.06);
	}
	
	.body-lecture-piece-video{
		width: 100%;
		height: 100%;
		border-radius: 2vw  2vw  0vw 0vw;
	}
	.body-lecture-piece-title{
		width: auto;
		height: 100%;
		display: grid;
		justify-items: center;
		align-items: center;
		grid-column-gap: 1vw;
		grid-template-columns: auto auto;
	}
	.body-lecture-piece-icon{
		width: 3vw;
		height: 4vw;
		background: url(../../static/index/hot.png);
		background-size: 100% 100%;
	}
	.body-lecture-piece-text{
		font-size: 4vw;
		font-weight: 600;
	}
	.body-lecture-piece-Introduction{
		font-size: 3vw;
	}
	
	.body-button{
		width: 95vw;
		height: 10vw;
		border-radius: 5vw;
		display: grid;
		justify-items: center;
		align-items: center;
		/* font-size: 4vw; */
		color: #ffffff;
		background: #1492FF;
		cursor: pointer;
	}
</style>